<template>
  <div class="first_level_page">
    <svg style="position:absolute;width:0;height:0">
      <defs>
        <symbol viewBox="0 0 38 38" id="selectedActive">
          <circle cx="19" cy="19" r="19" stroke-width="0" fill="#ffa101"/>
          <line x1="8" y1="18" x2="16" y2="27"
                style="stroke:#fff;stroke-width:2"/>
          <line x1="16" y1="27" x2="31" y2="12"
                style="stroke:#fff;stroke-width:2"/>
        </symbol>

        <symbol viewBox="0 0 38 38" id="selectedDefault">
          <circle cx="19" cy="19" r="17" stroke="rgb(229,229,229)"
                  stroke-width="2" fill="white"/>
        </symbol>
      </defs>
    </svg>
    <div class="confirm_order_main">
      <div class="delivery_address_container">
        <div class="custom_name_tel">
          <div class="custom_name left" v-if="sellerMessage.list!=null">{{sellerMessage.list.trueName}}</div>
          <div class="custom_tel" v-if="sellerMessage.list!=null">{{sellerMessage.list.tel}}</div>
        </div>
        <div class="address ellipsis" v-if="sellerMessage.list!=null">
          {{sellerMessage.list.address}}
        </div>
        <router-link to="/confirmOrder/chooseAddress" class="go_icon">
          <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 30">
            <polyline points="0,0 14,15 0,30" style="fill:none;stroke:rgb(153,153,153);stroke-width:4"/>
          </svg>
        </router-link>
      </div>
      <div class="goods_list_container" >
        <div class="warehouse_container" v-if="goods.list!=null">
                    <div>{{goods.list[0].sysMechanismList[0].mechanismName}}({{goods.list[0].warehouseCode}})</div>
                  </div>
                  <div class="goods_list">
                    <div  class="goods_demo" v-if="goods.list!=null">
                      <div class="goods_name ellipsis left">{{goods.list[0].goodsName}}</div>
                      <div class="goods_buy right">
                        <div class="goods_price">￥{{goods.list[0].bmSpecificationList[0].oldPrice}}</div>
                        <div class="goods_buy_num">×1</div>
                        <div class="goods_total_price">￥{{goods.list[0].bmSpecificationList[0].oldPrice}}</div>
                      </div>
                    </div>
                  </div>
      </div>
      <div class="discount_container">
        <div class="discount_demo">
          <div class="discount_name left">物流合计费用</div>
          <div class="discount_value right">￥{{fee}}</div>
        </div>
        <div class="discount_demo">
          <div class="discount_name left">优惠金额</div>
          <div class="discount_value right">￥{{goods.list[0].bmSpecificationList[0].oldPrice-goods.list[0].bmSpecificationList[0].price}}</div>
        </div>
        <div class="discount_demo">
          <div class="discount_name left">
            备注:
            <input v-model="remark" maxlength="20" type="text" name="mark" placeholder="选填">
          </div>
        </div>
      </div>
    </div>
    <div class="confirm_order_bottom">
      <div class="order_total left">
        合计：
        <span class="total_price">￥{{talPrice}}</span>
      </div>
      <div class="confirm_order_btn right" @click="commitOrder()">
        提交订单
      </div>
    </div>
    <alert-tip v-if="showAlert" @closeTip="closeTip" :alertText="alertText"></alert-tip>
    <transition name="router-slid" mode="out-in">
      <router-view></router-view>
    </transition>

    <transition name="loading">
      <loading v-if="showLoading"></loading>
    </transition>
  </div>
</template>

<script>
import {mapState, mapMutations} from 'vuex'
import alertTip from 'src/components/common/alertTip'
import {WXcreateInOrder, calculateLogistics} from 'src/service/getData'
import {imgBaseUrl} from 'src/config/env'
import {fmoney} from 'src/config/mUtils'
import loading from 'src/components/common/loading'
// 新加的
import {addOrder, alterNums, getGeoDistance, getTokenMessage} from "../../service/shopping";
import {getSeckillOrder} from "../../service/api";

export default {
  data(){
    return {
      payCart: {}, //购物车结算商品
      tickVoucherList: {}, //实物礼品列表
      voucherList: {}, //可用提货券列表
      deliveryFee: 0.00, //物流费
      discount: 0.00, //优惠金额
      showVoucherList: false,
      voucher: {}, //使用的提货券
      payMoney: 0.00, //合计
      remark: '',
      showAlert: false,
      alertText: '',
      tipType: 0, //1:跳转到选择支付方式页面,2:跳转到订单列表页,3:回到购物车页面
      showLoading: false, //显示加载动画
      fullAmountMessage: '',
      employeeId:'',
      fee:0,
      goods: [],
      sellerMessage: [],
      toPayMessage:[],
      talPrice: 0.0,//总价
      flag:false,
    }
  },
  created(){
    this.goods = this.$route.params.data;
    console.log("rr",this.goods);
  },
  mounted() {
    const arr = {};
    if(this.goods!=null){
    arr.mechanismName = this.goods[0].sysMechanismList[0].mechanismName;
    arr.warehouseCode = this.goods[0].warehouseCode;
    arr.warehouseMap = this.goods[0].bmWarehouseList[0].mapCode;
    arr.deliveryfeeAverykm = this.goods[0].bmWarehouseList[0].deliveryfeeAverykm;
    arr.specificationId = this.goods[0].bmSpecificationList[0].id;
    arr.list = this.goods;
    // this.goods.forEach((item) => {
    //   this.totalPrice += item.oldPrice*item.buyNum;
    // });
    this.totalPrice = this.goods[0].bmSpecificationList[0].price;
    arr.totalPrice = this.totalPrice;
    }
    console.log("arr",arr);
    // if (this.totalPrice>=100 && this.totalPrice<200){
    //   this.preferentialPrice = 10;
    // }else if(this.totalPrice>=200 && this.totalPrice<300){
    //   this.preferentialPrice = 20;
    // }else if(this.totalPrice>=300){
    //   this.preferentialPrice = 30;
    // }
    // localStorage.setItem("preferentialPrice", JSON.stringify(this.preferentialPrice));
    localStorage.setItem("goods", JSON.stringify(arr));
    this.getSellerMessage();
  },
  components: {
    alertTip,
    loading,
  },
  computed: {
    ...mapState([
      'userInfo','cartList','defaultAddress'
    ]),
    /**
     * 监听cartList变化，更新当前用户的购物车信息userCart，同时返回一个新的对象
     */
    userCart: function (){
      return Object.assign({},this.cartList[this.userInfo.id]);
    },
  },
  methods: {
    ...mapMutations([
      'GOODS_DELETE_CART'
    ]),
    initData(){

    },
    calculateDistance() {
      console.log("warehouseMap",this.warehouseMap);
      this.lat1 = this.warehouseMap.split(',')[0];
      console.log("lat1",this.lat1);
      this.lon1 = this.warehouseMap.split(',')[1];
      console.log("lon1",this.lon1);
      console.log("sellerMap",this.sellerMap);
      this.lat2 = this.sellerMap.split(',')[0];
      console.log("lat2",this.lat2);
      this.lon2 = this.sellerMap.split(',')[1];
      console.log("lon2",this.lon2);
      const geoData ={};
      geoData.lat1 = this.lat1;
      geoData.lon1 = this.lon1
      geoData.lat2 = this.lat2;
      geoData.lon2 = this.lon2;
      console.log("geoData",geoData);
      getGeoDistance(geoData).then(response => {
        this.distance = response.data;
        console.log("distance",this.distance);
        localStorage.setItem("distance", JSON.stringify(this.distance));
      });
      const distance = localStorage.getItem("distance");
      this.distance = JSON.parse(distance)/1000;//公里
      console.log("distance2",this.distance);
      this.deliveryfeeAverykm =  this.goods.deliveryfeeAverykm;
      console.log("deliveryfeeAverykm",this.deliveryfeeAverykm);
      const fei = this.distance * this.deliveryfeeAverykm;
      this.fee = (fei/1000).toFixed(2);//公里,保留两位小数
      console.log("fee",this.fee);
      this.talPrice = this.goods.totalPrice + parseFloat(this.fee);
      localStorage.setItem("fee",JSON.stringify(this.fee));
    },
    getSellerMessage(){
      getTokenMessage().then(response => {
        this.sellerMessage = response.data.data;
        console.log("sellerMessage",this.sellerMessage);
        const ary = {};
        ary.sellerMap = this.sellerMessage.mapCode;
        ary.list = this.sellerMessage;
        console.log("ary",ary);
        // 存储数据到 LocalStorage
        localStorage.setItem("sellerMessage", JSON.stringify(ary));
        const storedData = localStorage.getItem("sellerMessage");
        const goods = localStorage.getItem("goods");
        // const preferentialPrice = localStorage.getItem("preferentialPrice");
        const fee1 = localStorage.getItem("fee");

        this.sellerMessage = JSON.parse(storedData);
        console.log("111sellerMessage",this.sellerMessage);
        console.log(">>>",this.sellerMessage.list.trueName);
        this.goods = JSON.parse(goods);
        // this.preferentialPrice = JSON.parse(preferentialPrice);
        this.fee = JSON.parse(fee1);
        console.log("++fee",this.fee);
        this.warehouseMap = this.goods.warehouseMap;
        this.sellerMap = this.sellerMessage.sellerMap;
        // const num = parseFloat(this.fee);
        // this.talPrice = this.goods.totalPrice - this.preferentialPrice + num;
        // this.talPrice = this.goods.totalPrice + num;
        console.log("++this.goods.totalPrice",this.goods.totalPrice);
        // console.log("fee",num);
        console.log("++talPrice",this.talPrice);
        console.log("goods");
        console.log(this.goods);
        console.log("sellerMessage");
        console.log(this.sellerMessage);
        this.calculateDistance();//获取经纬度之间距离的方法
      })
        .catch(error => {
          console.log(error);
        });
    },

    goodsPrice(priceRange, buyNum){

    },
    goodsTotalPrice(spec){

    },
    //是否使用提货券
    useVoucher(){

    },
    selectVoucher(voucher){

    },
    //合计计算
    goodsTotalAmount(){

    },
    closeTip(){
      this.showAlert = false;

    },
    showTip(tipType, alertText){
      this.tipType = tipType;
      this.alertText = alertText;
      this.showAlert = true;
    },
    async commitOrder(){
      // this.showLoading = true;
      // const id = goods.bmSpecificationList[0].id;
      // console.log("<<>>",id);
      // console.log("goods=",this.goods);
      // // 创建订单，返回订单编号
      // const orderMessage = {};
      // getSeckillOrder(id).then(response => {
      //   console.log("222response",response);
      //   orderMessage.orderCode = response.data.data.orderCode;
      //   // 传递给支付页面订单支付金额+订单编号
      //   this.toPayMessage.push(this.goods.bmSpecificationList[0].price);
      //   this.toPayMessage.push(orderMessage.orderCode);
      //   this.toPayMessage.push(this.goods.warehouseCode);
      //   if (this.toPayMessage.length == 3) {
      //     console.log(this.toPayMessage)
      //     this.$router.push({name: 'payment', params: {data: this.toPayMessage}})
      //   }
      // });

      const goods = localStorage.getItem("goods");
      const goodsData = JSON.parse(goods);
      // 定义数据
      const order = {};
      order.sellerId = this.sellerMessage.list.id;
      order.deliveryFee = this.fee;
      order.amount = this.talPrice;
      order.address = this.sellerMessage.list.address;
      order.mark = this.remark;
      order.warehouseCode = goodsData.warehouseCode;
      order.list = goodsData.list;
      order.specificationId =goodsData.specificationId;
      console.log("创建订单前端传递的数据");
      console.log(order);
      // 创建订单，返回订单编号
      const orderMessage = {};
      getSeckillOrder(order).then(response =>{
        orderMessage.orderCode = response.data.msg;
        console.log("创建订单是否成功");
        console.log(response.data);
        // 订单创建成功，根据规格id 删除redis中对应数据
        // if (response.data.code == 200){
        //   for (let i = 0; i < goodsData.list.length; i++) {
        //     this.delRedisData.push(goodsData.list[i]);
        //     console.log(this.delRedisData);
        //   }
        //   alterNums(this.delRedisData).then(response =>{
        //     console.log("1111----11111");
        //     console.log(response.data);
        //   });
        // }
        // 传递给支付页面订单支付金额+订单编号
        this.toPayMessage.push(this.talPrice);
        this.toPayMessage.push(orderMessage.orderCode);
        this.toPayMessage.push(this.goods.warehouseCode);
        this.toPayMessage.push(this.flag);
        console.log(this.toPayMessage);
        if (this.toPayMessage.length == 4){
          console.log(this.toPayMessage)
          this.$router.push({ name: 'payment', params: {data : this.toPayMessage}});
        }
      })
    }
  },
  watch: {
    userInfo: function (value) {

    },
    fullAmountMessage: function(value){

    },
    defaultAddress: async function(value){

    }
  }
}

</script>

<style lang="scss" scoped>
@import 'src/style/mixin';
.confirm_order_main{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 1.38rem;
  overflow: auto;
  .delivery_address_container{
    position: relative;
    @include wh(100%, 1.46rem);
    background: url(../../images/addressBg.png) no-repeat;
    background-size: 100% .1rem;
    background-color: #fff;
    .custom_name_tel{
      @include wh(100%, .7rem);
      @include sc(.3rem, #333);
      padding-top: .4rem;
      line-height: .3rem;
      .custom_name{
        margin-left: .24rem;
        margin-right: .7rem;
      }
    }
    .address{
      @include sc(.28rem, #666);
      margin-left: .24rem;
      margin-top: .22rem;
      margin-right: .5rem;
    }
    .go_icon{
      position: absolute;
      right: 0;
      top: 0;
      margin-top: -.1rem;
      display: block;
      padding: .68rem .2rem .58rem;
      svg{
        float: left;
        @include wh(.16rem, .3rem);
      }
    }
  }
  .goods_list_container{
    background: #fff;
    margin-top: .2rem;
    .warehouse_container{
      @include sc(.3rem, #333);
      @include wh(100%, .9rem);
      border-bottom: .01rem solid #dedede;
      div{
        margin-left: .24rem;
        line-height: .9rem;
      }
    }
    .goods_list{
      background: #fff;
      .goods_demo{
        margin-left: .5rem;
        border-bottom: .01rem solid #dedede;
        height: .84rem;
        line-height: .84rem;
        @include sc(.28rem, #333);
        .goods_name{
          @include wh(2.8rem, 100%);
        }
        .goods_buy{
          margin-right: .2rem;
          @include wh(4rem, 100%);
          display: flex;
          .goods_price{
            width: 1.4rem;
          }
          .goods_buy_num{
            width: 1rem;
          }
          .goods_total_price{
            width: 1.6rem;
            text-align: right;
          }
        }
      }
      .goods_demo:last-child{
        border-bottom: none;
      }
    }
  }
  .gift_list_container{
    background: #fff;
    margin-top: .2rem;
    .gift_title{
      @include sc(.3rem, #333);
      height: .9rem;
      border-bottom: .01rem solid #dedede;
      padding-left: .24rem;
      line-height: .9rem;
    }
    .gift_list{
      background: #fff;
      .gift_demo{
        margin-left: .5rem;
        border-bottom: .01rem solid #dedede;
        height: .84rem;
        line-height: .84rem;
        @include sc(.28rem, #333);
        .gift_name{
          @include wh(4.2rem, 100%);
        }
        .gift_buy{
          margin-right: .2rem;
          @include wh(2.6rem, 100%);
          display: flex;
          .gift_price{
            width: 1.4rem;
          }
          .gift_buy_num{
            width: 1.2rem;
            text-align: right;
          }
        }
      }
      .gift_demo:last-child{
        border-bottom: none;
      }
    }
  }
  .discount_container{
    background: #fff;
    margin-top: .2rem;
    margin-bottom: .2rem;
    .discount_title{
      padding-left: .24rem;
      height: .9rem;
      line-height: .9rem;
      @include sc(.3rem, #333);
      border-bottom: .01rem solid #dedede;
    }
    .discount_demo{
      @include sc(.28rem, #333);
      height: .84rem;
      margin-left: .5rem;
      padding-right: .2rem;
      border-bottom: .01rem solid #dedede;
      line-height: .82rem;
      position: relative;
      .discount_value{
        .select_div{
          @include wh(2.54rem, .48rem);
          border: .01rem solid #dedede;
          border-radius: .04rem;
          line-height: .48rem;
          margin-top: .18rem;
          padding-left: .1rem;
          padding-right: .2rem;
          @include sc(.26rem, #333);
          .icon{
            @include wh(.26rem, .16rem);
          }
        }
      }
    }
    .discount_name input[type="text"] {
      line-height: 0.6rem; /* 调整字体显露高度 */
    }
    .discount_demo:last-child{
      border-bottom: none;
    }
    .voucher_discount_demo{
      .discount_name{
        padding-left: .4rem;
        input{
          height: .82rem;
          width: 6rem;
          border: none;
        }
      }
      .voucher_select{
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: .4rem;
        padding: .28rem 0;
        svg{
          float: left;
          @include wh(.28rem, .28rem);
        }
      }
    }
  }
}
.hover_notice{
  position: fixed;
  left: 0;
  right: 0;
  bottom: .94rem;
  height: .44rem;
  line-height: .44rem;
  background: #fff9ef;
  @include sc(.24rem, $orange);
  .marquee{
    display: block;
    width: 300%;
    height: .44rem;
    position: absolute;
    overflow: hidden;
    animation: marquee 10s linear infinite;
    span {
      @include sc(.24rem, #ff4400);
      float: left;
      padding: 0 .4rem;
    }
  }
  @keyframes marquee {
    0% { left: 0; }
    100% { left: -100%; }
  }
}
.confirm_order_bottom{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: .94rem;
  line-height: .94rem;
  background: #fff;
  .order_total{
    margin-left: .24rem;
    @include sc(.3rem, #333);
    .total_price{
      color: $orange;
    }
  }
  .confirm_order_btn{
    @include wh(2.5rem, 100%);
    background: $orange;
    @include sc(.34rem, #fefffe);
    text-align:center;
  }
}
.voucher_model{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  .voucher_model_bg{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.5);
    z-index: -1;
  }
  .voucher_main{
    @include wh(5.5rem, 5rem);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -3rem;
    margin-left: -2.75rem;
    background: #efeff4;
    border-radius: .16rem;
    .voucher_title{
      border-top-left-radius: .16rem;
      border-top-right-radius: .16rem;
      background: #ebebeb;
      @include wh(100%, .86rem);
      @include sc(.32rem, #333);
      font-weight: bold;
      line-height: .86rem;
      text-align: center;
      border-bottom: .01rem solid #ccc;
    }
    .voucher_list{
      @include wh(100%, 4.14rem);
      overflow: auto;
      .voucher_demo{
        @include wh(100%, .88rem);
        border-bottom: .01rem solid #ccc;
        @include sc(.3rem, #333);
        text-align: center;
        line-height: .88rem;
        background: #fff;
      }
    }
  }
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .3s;
}
.fade-enter, .fade-leave-active {
  opacity: 0;
}
.slid_up-enter-active, .slid_up-leave-active {
  transition: all .3s;
}
.slid_up-enter, .slid_up-leave-active {
  transform: translate3d(0,10rem,0)
}
.router-slid-enter-active, .router-slid-leave-active {
  transition: all .4s;
}
.router-slid-enter, .router-slid-leave-active {
  transform: translate3d(2rem, 0, 0);
  opacity: 0;
}
</style>
